<template>
    <h1>RolesList:</h1>
    <el-card style="width: 100%">
      <template #header>
        <div class="card-title">
          <h3>筛选审查</h3>
          <el-form :inline="true" @submit.prevent="handleSearch">
            <el-form-item label="输入搜索：">
              <el-input @input="handleSearch" v-model="searchQuery" placeholder="请输入角色名称"
                        style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button type="primary" plain @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>

      <el-button type="primary" icon="plus" @click="openDialog" >新增角色</el-button>

      <el-table :data="tableData" border style="width: 100%;margin-top: 20px">
        <el-table-column type="index" label="序号" align="center" width="80px"/>
        <el-table-column prop="createdBy" label="角色名称" align="center"/>
        <el-table-column prop="description" label="描述内容" align="center"/>
        <el-table-column prop="createdTime" label="创建时间" align="center"/>
        <el-table-column label="操作" align="center" width=" ">
          <template #default="scope">
          <el-button type="primary" link>分配菜单</el-button>
          <el-button type="primary" link>分配资源</el-button>
          <el-button type="primary" @click="handleEdit(scope.row)" link>编辑</el-button>
          <el-button type="danger" @click="handleDelete(scope.row)" link>删除</el-button>
            </template>
        </el-table-column>
      </el-table>
    </el-card>

<!--    弹窗组件-->
    <AddRoles v-model="dialogVisible" @close="closeDialog" :role="allRole"  />
</template>

<script setup>
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import {getRolePages} from "@/api/roles";
import {ElMessage, ElMessageBox} from "element-plus";
import AddRoles from "./dialog/AddRoles.vue";

const dialogVisible = ref(false);
const allRole = ref({ });

// 新增角色弹窗
const openDialog = () => {
  router.push({path: "/permission/role", query: { type: "add"}});
  dialogVisible.value = true;
};
// 关闭新增角色弹窗
const closeDialog = () => {
  dialogVisible.value = false;
};


const router = useRouter();
const tableData = ref([]);
const searchQuery = ref("");
const filteredData = ref([]);

onMounted(() => {
  getAllRole();
});

// 获取所有角色数据
const getAllRole = async () => {
  const res = await getRolePages();
  tableData.value = res.data.data.records;  // 获取所有角色数据
  filteredData.value = tableData.value;
};

// 搜索角色
const handleSearch = () => {
  if (searchQuery.value.trim() !== "") {
    //使用 trim() 方法去除 searchQuery（用户输入的搜索内容）前后的空格。
    // 使用 filter() 方法/使用 trim() 方法过滤 tableData
    //使用 includes 方法检查角色名称中是否包含搜索内容。
    tableData.value = tableData.value.filter(role => {
      return role.createdBy.includes(searchQuery.value);
    });  // 过滤后的数据
  }
};

// 重置搜索条件
const resetSearch = () => {
  searchQuery.value = "";
  tableData.value = filteredData.value;  // 重置后的数据
};

// 编辑角色
const handleEdit = (row) => {
 dialogVisible.value = true;
 router.push({path: "/permission/role", query: { type: "edit", id: row.id}});
  // 处理编辑角色的逻辑，打开编辑弹窗，传入角色数据
  Object.assign(allRole.value, row);
  console.log(allRole.value);
};

// 删除角色
const handleDelete = () => {
  // 弹出确认框，确认是否删除
  ElMessageBox.confirm("此操作将永久删除该角色, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    // 处理删除角色的逻辑，调用删除接口，刷新页面
    ElMessage.success("删除成功！");
    getAllRole();
  }).catch(() => {
    // 用户取消操作
    ElMessage.info("已取消删除！");
  });
};
</script>

<style>


</style>
